<template>
  <Layout>
    <section class="p-5 bg-white mb-5">
      <el-form
        ref="queryForm"
        label-width="120px"
        class="flex flex-wrap"
        :model="originQuery"
      >
        <el-form-item
          class="w-4/12"
          label="公司名称"
          prop="compName"
        >
          <el-input v-model.trim="originQuery.compName" />
        </el-form-item>

        <el-form-item
          class="w-4/12"
          label="订单编号"
          prop="phoneNum"
        >
          <el-input v-model.trim="originQuery.orderNo" />
        </el-form-item>

        <el-form-item class="w-4/12 mr-auto" label="支付状态" prop="expireState">
          <el-select v-model.trim="originQuery.payStatus">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in paymentStatus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item
          class="w-4/12"
          label="创建时间"
          prop="submitTime"
        >
          <el-date-picker v-model.trim="originQuery.submitTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="() => handleQuery({ num: 1 })"> 查询 </el-button>
          <el-button @click="handleReset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </section>

    <section>
      <el-button class="mb10" type="primary" @click="handleEditClick"> 新建付款码 </el-button>

      <el-table ref="table" :data="tableList" border>
        <el-table-column align="center" label="序号" type="index" width="50px" :index="(index) => query.size * (query.num - 1) + index + 1" />
        <el-table-column label="公司名称" prop="compName" />
        <el-table-column label="销售" prop="saleName" width="80px" />
        <el-table-column label="订单编号" prop="orderNo" />
        <el-table-column label="成交产品" prop="dealProduct">
          <template v-slot="{ row }">{{ productObj[row.dealProduct] || '--' }}</template>
        </el-table-column>
        <el-table-column label="成交类型" prop="dealType" width="80px">
          <template v-slot="{ row }">{{ typeObj[row.dealType] || '--' }}</template>
        </el-table-column>
        <el-table-column label="数量" prop="num" width="80px" />
        <el-table-column label="年限" prop="year" width="90px">
          <template v-slot="{ row }">
            <span v-if="row.year">{{ row.year }}年</span>
            <span v-if="row.month">{{ row.month }}月</span>
          </template>
        </el-table-column>
        <el-table-column label="订单金额（元）" prop="orderAccount" width="120px" />
        <el-table-column label="已支付金额（元）" prop="actualAccount" width="135px" />
        <el-table-column label="支付状态" prop="payStatus" width="80px">
          <template v-slot="{ row }"><span :class="statusColor[row.payStatus]">{{ statusObj[row.payStatus] || '--' }}</span></template>
        </el-table-column>

        <el-table-column label="创建时间" prop="updateTime" width="160px" />

        <el-table-column label="操作" width="100px">
          <template #default="{ row }">
            <el-button v-if="row.payStatus === 0" type="text" @click="handleSeeClick(row)"> 查看二维码 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="text-center py-4">
        <el-pagination
          background
          :total="total"
          :page-size="query.size"
          :current-page.sync="query.num"
          @current-change="handlePageChange"
        />
      </div>
    </section>
    <!-- 新建付款吗 弹窗 -->
    <el-dialog title="新建付款码" :visible.sync="dialogVisible" width="525px" :destroy-on-close="true">
      <el-steps :active="active" align-center>
        <el-step title="填写收款信息"></el-step>
        <el-step title="生成付款码"></el-step>
      </el-steps>
      <!-- 第一步 信息 填写 -->
      <el-form v-show="active === 1" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
        <el-form-item label="公司名称" prop="compName">
          <el-input v-model="ruleForm.compName" placeholder="请填写公司全称" :disabled="saveSuccess"></el-input>
        </el-form-item>
        <el-form-item label="销售" prop="saleName">
          <el-input v-model="ruleForm.saleName" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="成交产品" prop="dealProduct">
          <el-select v-model="ruleForm.dealProduct" placeholder="请选择成交产品" :disabled="saveSuccess">
            <el-option v-for="item in productOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成交类型" prop="dealType">
          <el-select v-model="ruleForm.dealType" placeholder="请选择成交类型" :disabled="saveSuccess">
            <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量" prop="num">
          <el-input v-model.number="ruleForm.num" placeholder="请填写数量" :minlength="1" :maxlength="3" :disabled="saveSuccess"></el-input>
        </el-form-item>

        <el-form-item label="年限" prop="date" class="f-date">
          <el-input v-model.number="ruleForm.year" :maxlength="2" placeholder="请填写年限" :disabled="saveSuccess" @keyup.native="handleYearChange"></el-input><span class="year">年</span>
          <el-input v-model.number="ruleForm.month" :maxlength="2" placeholder="请填写月数" :disabled="saveSuccess" @keyup.native="handleMonthChange"></el-input>个月
        </el-form-item>

        <el-form-item label="订单金额" prop="orderAccount">
          <el-input v-model="ruleForm.orderAccount" :maxlength="6" placeholder="请填写金额" :disabled="saveSuccess"></el-input>
        </el-form-item>
      </el-form>
      <!-- 第二步 生成 付款吗 -->
      <div v-show="active === 2" class="qr-code">
        <div ref="qrCodeUrl" v-loading="loading" class="qr-img"><img :src="imgUrl" /></div>

        <div class="qr-icon">
          <p class="business-icon"><img src="@/assets/img/pay-icon.png" />扫码支付</p>
          <p class="gray">付款码有效时间：{{ payExpireTime || '' }}请尽快支付哦～</p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button v-show="active === 1" @click="handleCloseClick">{{ saveSuccess ? '关 闭' : '取 消' }}</el-button>
        <el-button v-show="active === 2" @click="handleCloseClick">关 闭</el-button>
        <el-button v-show="active === 2" @click="handlePreClick">上一步</el-button>
        <el-button v-show="active === 1" type="primary" @click="handleCreatClick">{{ saveSuccess ? '查看' : '生成' }}付款码</el-button>
<!--        <el-button v-show="active === 2" type="primary" @click="handleCopyClick">复制付款码</el-button>-->
        <el-button v-show="active === 2" type="primary" @click="handleCopyClick">下载付款码</el-button>
      </span>
    </el-dialog>
</Layout>
</template>

<script>
import dayjs from 'dayjs'
import QRCode from 'qrcode'
import Layout from '@/layouts/index.vue'
import { paymentList, savePayment, seeCode } from '@/api/clue'

export default {
    name: 'PaymentManage',
    components: {
        Layout,
    },
    data() {
        return {
            total: 0,
            active: 1,
            rowData: {},
            tableList: [],
            dialogVisible: false,
            query: {
                num: 1,
                size: 10,
            },
            originQuery: {
                compName: '',
                orderNo: '',
                submitTime: '',
                toDate: '', // 结束时间
                fromDate: '', // 开始时间
                payStatus: null,
            },
            ruleForm: {
                compName: '',
                saleName: '',
                dealProduct: '', // 成交产品:([1:企点货代Q宝-基础版],[2:企点货代Q宝-基础版增值包],[3:企点货代Q宝-标准版],[4:企点货代Q宝-标准版增值包],[5:货代Q宝基础版升级标准版])
                dealType: '', // 成交类型:([1:新销售],[2:加工号],[3:续费],[4:升级])
                num: '',
                orderAccount: '',
                year: '',
                month: '',
                date: '',
            },
            imgUrl: '',
            loading: false,
            creatCodeId: '', // 创建付款码 生成的 数据 id 记录查看使用
            payExpireTime: '', // 支付剩余时间
            saveSuccess: false,
            rules: {
                compName: [
                    { required: true, message: '请填写公司全称', trigger: 'blur' },
                ],
                saleName: [{ required: true, message: '请填写销售人员', trigger: 'blur' }],
                dealProduct: [
                    { required: true, message: '请选择成交产品', trigger: 'change' },
                ],
                dealType: [
                    { required: true, message: '请选择成交类型', trigger: 'change' },
                ],
                num: [
                    { type: 'number', required: true, message: '请填写数量', trigger: 'blur' }, { type: 'number', pattern: /^[1-9]\\d*$/, message: '请输入1-999正整数', trigger: 'change' },
                ],
                date: [
                    { required: true, message: '请填写年限', trigger: 'blur' },
                ],
                orderAccount: [
                    { required: true, message: '请填写金额', trigger: 'blur' },
                    { pattern: /^(([0-9]+)|([0-9]+\.[0-9]{0,2}))$/, message: '请输入0.01-999999正数, 最多支持2位小数', trigger: 'change' },
                ],
            },

            productObj: {
                0: '--',
                1: '企点货代Q宝-基础版',
                2: '企点货代Q宝-基础版增值包',
                3: '企点货代Q宝-标准版',
                4: '企点货代Q宝-标准版增值包',
                5: '货代Q宝-基础版升级标准版',
            },
            typeObj: {
                0: '--',
                1: '新销售',
                2: '加工号',
                3: '续费',
                4: '升级',
            },
            statusObj: {
                0: '待付款',
                1: '支付成功',
                2: '订单超时',
                3: '交易失败',
                4: '交易关闭',
            },
            statusColor: {
                0: 'status0',
                1: 'status1',
                2: 'status2',
                3: 'status3',
                4: 'status4',
            },
            paymentStatus: [{ // 支付状态: PAY_WAITE(0, "待付款"), PAY_SUCCESS(1, "支付成功"),ORDER_TIMEOUT(2, "订单超时"), PAY_FAIL(3, "交易失败"), PAY_CANCEL(4, "交易关闭")
                value: 0,
                label: '待付款',
            }, {
                value: 1,
                label: '支付成功',
            }, {
                value: 2,
                label: '订单超时',
            }, {
                value: 3,
                label: '交易失败',
            }, {
                value: 4,
                label: '交易关闭',
            }],
            productOption: [{
                value: 1,
                label: '企点货代Q宝-基础版',
            }, {
                value: 2,
                label: '企点货代Q宝-基础版增值包',
            }, {
                value: 3,
                label: '企点货代Q宝-标准版',
            }, {
                value: 4,
                label: '企点货代Q宝-标准版增值包',
            }, {
                value: 5,
                label: '货代Q宝-基础版升级标准版',
            }],
            typeOption: [{
                value: '1',
                label: '新销售',
            }, {
                value: 2,
                label: '加工号',
            }, {
                value: 3,
                label: '续费',
            }, {
                value: 4,
                label: '升级',
            }],
        }
    },
    computed: {
        user() {
            return this.$store.getters.user
        },
    },
    created() {
        this.handleQuery()
    },
    mounted() {
    },
    methods: {
        async handleQuery() {
            const params = {...this.originQuery}
            const { submitTime } = params

            if(submitTime && submitTime.length > 0) {
                params.fromDate = dayjs(submitTime[0]).format('YYYY-MM-DD')
                params.toDate = dayjs(submitTime[1]).format('YYYY-MM-DD')
            }
            delete params.submitTime

            this.query = { ...this.query, ...params }
            this.query.num = 1
            this.searchFunc()
        },
        /**
        *@Description 数据查询 .
        *@Return .
       **/
        async searchFunc() {
            let res = await paymentList({ ...this.query })
            this.tableList = res.data.records
            this.total = res.data.total
        },
        handlePreClick() {
            this.active = 1
            this.saveSuccess = true
        },
        /**
        *@Description 新建付款码 按钮 .
        *@Return .
       **/
        handleEditClick() {
            this.active = 1
            this.saveSuccess = false
            this.dialogVisible = true
            this.$nextTick(() => {
                this.ruleForm = {
                    year: '',
                    month: '',
                    date: '',
                    saleId: this.user.userId,
                    saleName: this.user.userName,
                }
                this.$refs.ruleForm.resetFields()
            })
        },
        /**
        *@Description 查看二维码 .
        *@Return .
       **/
        async handleSeeClick(row) {
            this.rowData = { ...row }
            this.ruleForm = { ...row }
            this.ruleForm.date = row.year || row.month
            if(row.year === 0) this.ruleForm.year = ''
            if(row.month === 0) this.ruleForm.month = ''
            this.methodSeeCode(row.id)
        },
        /**
        *@Description saveSuccess: true 保存成功 - 只能查看了 .
        *@Return 查看、生成 都 调用下 生成付款码接口.
       **/
        handleCreatClick() {
            if(this.saveSuccess) {
                this.methodSeeCode(this.creatCodeId)
            } else {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        const params = {...this.ruleForm}
                        params.orderAccount = Number(params.orderAccount)
                        delete params.date
                        params.id = this.rowData.id
                        params.orderNo = this.rowData.orderNo
                        this.loading = true
                        savePayment({...params}).then(res => {
                            this.active = 2
                            this.saveSuccess = true
                            const { data } = res
                            this.creatCodeId = data
                            data && this.methodSeeCode(data)
                            this.handleReset()
                            console.log('save 返回：', res)
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        },
        async methodSeeCode(id) {
            const res = await seeCode(id)

            const { payExpireTime, qrCode } = res.data
            this.dialogVisible = true
            this.active = 2
            this.payExpireTime = payExpireTime

            this.$nextTick(() => {
                this.loading = false
                qrCode ? this.creatQrCode(qrCode) : this.imgUrl = ''
            })
        },
        /**
        *@Description 复制 付款码.
        *@Return .
       **/
        handleCopyClick() {
            this.downloadBase64(this.imgUrl)
            this.copyImgCode(this.imgUrl)
        },
        /**
        *@Description 复制图片 .
        *@Return .
       **/
        async copyImgCode(url) {
            try {

                // http
                // this.base64ToUrl(url)
                // const testImg = document.querySelector('#copyCodeImg')
                // const selection = window.getSelection()
                // if (selection.rangeCount > 0) {
                //     selection.removeAllRanges()
                // }
                // // // 选中元素→range→selection是一一对应的，即选区必须连续，不可以有分开的多个区域。另外，被选元素必须在dom树上，不可以是游离元素，
                // // // 并且实践发现display不能为none，visibility不能为hidden，即使不需要渲染。也就是说我可以创建一个游离元素，插入dom树，
                // // // 选择后copy，然后立刻从dom树移出，整个过程都在浏览器下一次渲染之前，所以页面上没有任何变化。
                // const range = document.createRange()
                // range.selectNode(testImg)
                // // // 该Selection.addRange()方法将 a 添加 Range到 a Selection。 只有firefox支持多范围
                // selection.addRange(range)
                // document.execCommand('copy')
                // selection.removeAllRanges()

                // https
                // const data = await fetch(url)
                // console.log('data-------------', data)
                // const blob = await data.blob()
                // console.log('blob-------------', blob)
                //
                // await navigator.clipboard.write([
                //     new window.ClipboardItem({
                //         [blob.type]: blob,
                //     }),
                // ])
                // this.$message.success('复制成功')
                console.log('Image copied.', url)
            } catch (err) {
                console.error(err.name, err.message)
            }
        },
        /**
        *@Description 下载图片 .
        *@Return .
       **/
        downloadBase64(base64) {
            const arr = base64.split(',')
            const bytes = atob(arr[1])
            let ab = new ArrayBuffer(bytes.length)
            let ia = new Uint8Array(ab)
            for (let i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i)
            }
            const blob = new Blob([ab], { type: 'application/octet-stream' })
            const url = URL.createObjectURL(blob)
            const time = dayjs().format('YYYY-MM-DD HH:mm:ss')
            const a = document.createElement('a')
            a.download = `付款码-${time}.png` //这里写保存时的图片名称
            a.href = url
            a.click()
        },
        handleCloseClick() {
            this.active = 1
            this.dialogVisible = false
        },
        handleYearChange() {
            const str = this.ruleForm.year.toString()
            if(this.ruleForm.year > 10) {
                return this.ruleForm.year = Number(str.slice(0, 1))
            }
            if(!this.validateInteger(this.ruleForm.year)) {
                this.ruleForm.year = ''
            }
            this.ruleForm.date = this.ruleForm.year
        },
        handleMonthChange() {
            const str = this.ruleForm.month.toString()
            if(this.ruleForm.month > 12) {
                return this.ruleForm.month = Number(str.slice(0, 1))
            }
            if(!this.validateInteger(this.ruleForm.month)) {
                this.ruleForm.month = ''
            }
            this.ruleForm.date = this.ruleForm.month
        },
        /**
        *@Description 校验 正整数 .
        *@Return .
       **/
        validateInteger(num) {
            return /^[1-9]\d*$/.test(num)
        },
        /**
        *@Description 创建二维码 .
        *@Return .
       **/
        creatQrCode(urlData) {
            const opts = {
                margin: 1,
                quality: 0.3,
                type: 'image/png',
                errorCorrectionLevel: 'H',
                color: {
                    dark: '#000',
                    light: '#fff',
                },
            }
            QRCode.toDataURL(urlData, opts,(err, url) => {
                if (err) {
                    throw err
                }
                this.imgUrl = url
            })
            // with then
            // QRCode.toDataURL('I am a pony!').then(url => {
            //     console.log('then url:', url)
            // }).catch(err => {
            //     console.error(err)
            // })
            // With async/await
            // const generateQR = async text => {
            //     try {
            //         console.log('await url:', await QRCode.toDataURL(text))
            //     } catch (err) {
            //         console.error(err)
            //     }
            // }
            // generateQR('6')
        },
        /**
        *@Description 重置 .
        *@Return .
       **/
        handleReset() {
            this.query = {
                num: 1,
                size: 10,
            }
            this.query.payStatus = null
            this.originQuery = {}
            this.handleQuery()
        },
        handlePageChange() {
            this.searchFunc()
        },
    },
}
</script>
<style lang="scss" scoped>
.mb10 {
  margin-bottom: 10px;
}
.f-date {
  .year {
    padding-right: 16px;
  }
  .el-input {
    width: 120px;
    margin-right: 8px;
  }
}
.el-steps {
  margin-bottom: 16px;
}
::v-deep .el-step__title {
  line-height: 22px;
  font-size: 14px;
}
.qr-code {
  display: flex;
  align-items: center;
  padding: 30px;
  border-radius: 1px;
  border: 1px solid #E1E6F0;
}
.qr-img {
  width: 180px;
  height: 180px;
  padding: 2px;
  background: #E1E6F0;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.qr-icon {
  width: calc(100% - 208px);
  margin-left: 20px;
  .gray {
    font-size: 12px;
    color: #A1ABC2;
  }
}
.business-icon {
  display: flex;
  align-items: center;
  img {
    width: 84px;
    margin-right: 10px;
  }
}
// 生成二维码 加载区域
::v-deep {
  .el-loading-mask {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-loading-spinner {
    width: auto;
  }
}
.status0 {
  color: #006aff;
}
.status1 {
  color: #30BF78;
}
.status2 {
  color: #FF7D00;
}
.status3 {
  color: #F46144;
}
.status4 {
  color: #D25F00;
}



</style>
